<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>海龟汤游戏</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
            color: #333;
        }
        
        h1 {
            text-align: center;
            color: #2c3e50;
        }
        
        .game-container {
            background-color: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }
        
        .game-intro {
            margin-bottom: 20px;
            line-height: 1.6;
        }
        
        .game-status {
            margin: 15px 0;
            padding: 10px;
            background-color: #f8f9fa;
            border-radius: 5px;
        }
        
        .soup-type {
            display: flex;
            justify-content: space-around;
            margin: 20px 0;
        }
        
        .soup-btn {
            padding: 10px 15px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s;
        }
        
        .red-soup {
            background-color: #ff6b6b;
            color: white;
        }
        
        .clear-soup {
            background-color: #4ecdc4;
            color: white;
        }
        
        .black-soup {
            background-color: #2c3e50;
            color: white;
        }
        
        .soup-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        
        .soup-surface {
            margin: 20px 0;
            padding: 15px;
            background-color: #e3f2fd;
            border-radius: 5px;
            font-style: italic;
        }
        
        .user-input {
            display: flex;
            margin: 20px 0;
        }
        
        #user-question {
            flex-grow: 1;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin-right: 10px;
        }
        
        #submit-btn {
            padding: 10px 20px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        
        #submit-btn:hover {
            background-color: #2980b9;
        }
        
        .game-response {
            margin: 15px 0;
            padding: 10px;
            background-color: #e8f5e9;
            border-radius: 5px;
        }
        
        .reveal-btn {
            display: block;
            width: 100%;
            padding: 10px;
            margin: 20px 0;
            background-color: #f39c12;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        
        .reveal-btn:hover {
            background-color: #e67e22;
        }
        
        .soup-bottom {
            margin: 20px 0;
            padding: 15px;
            background-color: #ffecb3;
            border-radius: 5px;
            display: none;
        }
        
        .restart-btn {
            display: block;
            width: 100%;
            padding: 10px;
            margin: 20px 0;
            background-color: #2ecc71;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        
        .restart-btn:hover {
            background-color: #27ae60;
        }
        
        .history {
            margin-top: 20px;
            border-top: 1px solid #ddd;
            padding-top: 20px;
        }
        
        .history-item {
            margin-bottom: 10px;
            padding: 8px;
            background-color: #f8f9fa;
            border-radius: 5px;
        }
        
        .user-question {
            font-weight: bold;
            color: #3498db;
        }
        
        .ai-response {
            color: #e74c3c;
        }
    </style>
</head>
<body>
    <h1>海龟汤游戏</h1>
    
    <div class="game-container">
        <div class="game-intro">
            <p>欢迎来到海龟汤游戏！这是一个推理游戏，你需要通过提问来揭开故事的真相。</p>
            <p>游戏规则：</p>
            <ul>
                <li>我会给出一个离奇的故事（汤面）</li>
                <li>你可以提出任何问题，我只能回答"是"、"不是"、"是也不是"或"与此无关"</li>
                <li>通过不断提问，推理出故事的真相（汤底）</li>
            </ul>
            <p>请选择题目类型开始游戏：</p>
        </div>
        
        <div class="soup-type">
            <button class="soup-btn red-soup" onclick="startGame('red')">红汤（有死亡情节）</button>
            <button class="soup-btn clear-soup" onclick="startGame('clear')">清汤（无死亡情节）</button>
            <button class="soup-btn black-soup" onclick="startGame('black')">黑汤（恐怖复杂）</button>
        </div>
        
        <div class="game-status" id="game-status">
            请选择题目类型开始游戏
        </div>
        
        <div class="soup-surface" id="soup-surface" style="display: none;">
            <!-- 汤面内容将在这里显示 -->
        </div>
        
        <div class="user-input" id="user-input" style="display: none;">
            <input type="text" id="user-question" placeholder="输入你的问题...">
            <button id="submit-btn" onclick="submitQuestion()">提问</button>
        </div>
        
        <div class="game-response" id="game-response" style="display: none;">
            <!-- AI的回答将在这里显示 -->
        </div>
        
        <button class="reveal-btn" id="reveal-btn" style="display: none;" onclick="revealTruth()">
            我猜到了，揭示真相
        </button>
        
        <div class="soup-bottom" id="soup-bottom">
            <!-- 汤底内容将在这里显示 -->
        </div>
        
        <button class="restart-btn" id="restart-btn" style="display: none;" onclick="restartGame()">
            重新开始游戏
        </button>
        
        <div class="history" id="history">
            <h3>提问历史</h3>
            <div id="history-list">
                <!-- 提问历史将在这里显示 -->
            </div>
        </div>
    </div>

    <script>
        // 游戏题库
        const soupDatabase = {
            red: [
                {
                    surface: "一个演员在剧组录影期间，突然被发现倒在自己的房间内，死于失血过多。推开窗户仰望天空，房外是未曾打扫的雪地，无人踏足的痕迹。房间里只有死者一个人，且门窗都是从内部锁上的。死者的衣服被剪得七零八落，而房间内没有发现有剪刀的痕迹。",
                    bottom: "死者是一名扮演雪人的演员。他在拍摄结束后回到房间休息，但忘记卸妆。房间里的暖气使他的雪人服装（实际上是冰）开始融化，导致他失血（实际上是水）过多而死。衣服被剪得七零八落是因为工作人员发现他时，试图用剪刀剪开他的衣服救他，但剪刀随后被融化的水冲走了。",
                    clues: ["演员的职业", "服装的特殊性", "雪地的意义", "失血的真实含义"]
                },
                {
                    surface: "在一个庄园中，庄园的主人被发现死在了自己的书房内。书房的门窗均紧闭，其他人都无法进入。庄园主人死于心脏病发，但是他的心脏病历史并未有人知道。他最后的遗言是'我看见了，是它杀了我'。而在他的手中，紧紧握着一把钥匙，这把钥匙是通向地下室的。地下室里没有任何人，但是里面有一个看似新鲜的人形脚印。那个印象就在一个已经多年无人打开的箱子旁边，箱子里装满了庄园主人的日记，其中提到了一种神秘的存在。",
                    bottom: "庄园主人年轻时曾在地下室囚禁了一个人，那人最终死在了箱子里。多年后，庄园主人偶然打开了箱子，看到了自己当年的罪行以幽灵形式重现（那个人形脚印），被吓到心脏病发作而死。钥匙是他想去地下室确认箱子情况时带的。",
                    clues: ["地下室的历史", "箱子的内容", "人形脚印的来源", "心脏病发的诱因"]
                }
            ],
            clear: [
                {
                    surface: "有一天，一个男人A把B给杀了，警察逮捕他询问动机，他却回答道:一直都是黑的。试还原案件全貌。",
                    bottom: "A和B是围棋选手，B总是执黑棋（围棋中黑棋先行）。A厌倦了总是执白棋后手，在一次对弈后杀死了B。'一直都是黑的'指的是B总是执黑棋。",
                    clues: ["A和B的关系", "黑的含义", "事件的背景", "动机的特殊性"]
                },
                {
                    surface: "男人A给了B一张纸，B在上面写下一个名字以后，A马上把B杀了，为什么？",
                    bottom: "A是刽子手，B是被执行死刑的犯人。那张纸是让犯人写下最后遗言的纸，B写完名字后就被执行了死刑。",
                    clues: ["A的职业", "B的身份", "纸的用途", "事件发生的场所"]
                }
            ],
            black: [
                {
                    surface: "三兄弟以前有三兄弟，大哥和二哥是双胞胎，三兄弟关系非常好，常常一起睡觉，大哥病死后，三弟把二哥杀了，为什么。",
                    bottom: "三弟有精神病，大哥病死后，弟弟把二哥分尸成左右两半，左边睡二哥的右半边身，右边睡二哥的左半边身，这样看起来大哥就好像没死一样。",
                    clues: ["三弟的心理状态", "杀死方式", "睡觉的安排", "大哥的角色"]
                },
                {
                    surface: "有一堆人帮一个盲人庆祝生日，他们是很好的朋友，很开心地点好蜡烛，为他唱生日歌，鼓掌，然后听到掌声后盲人就把他们全杀了，为什么？",
                    bottom: "生日的主角是盲人，曾经这一堆人一起出去玩，途中遇到了危险，也没有可以吃的食物了，他们说好要每个人砍一只手下来吃掉度过危险，其实他们没有砍自己的手，只有主角砍了。后来他们得救了，直到在唱生日歌前，他们点好了蜡烛，为他拍手唱生日歌，主角听到了他们的拍手声，知道了他们骗了自己，于是把他们杀了。",
                    clues: ["过去的经历", "掌声的意义", "主角的残疾原因", "背叛的证据"]
                }
            ]
        };

        // 游戏状态变量
        let currentGame = null;
        let currentSoup = null;
        let remainingQuestions = 10;
        let gameHistory = [];

        // 开始游戏
        function startGame(type) {
            
            const soups = soupDatabase[type];
            currentSoup = soups[Math.floor(Math.random() * soups.length)];
            currentGame = type;
            remainingQuestions = type === 'black' ? 15 : 10;
            
            document.getElementById('soup-surface').style.display = 'block';
            document.getElementById('soup-surface').textContent = currentSoup.surface;
            
            document.getElementById('user-input').style.display = 'flex';
            document.getElementById('reveal-btn').style.display = 'block';
            document.getElementById('game-response').style.display = 'none';
            document.getElementById('soup-bottom').style.display = 'none';
            document.getElementById('restart-btn').style.display = 'none';
            
            document.getElementById('game-status').textContent = `剩余提问次数: ${remainingQuestions}`;
            document.getElementById('history-list').innerHTML = '';
            gameHistory = [];
            
            // 设置输入框焦点
            document.getElementById('user-question').focus();
        }

        // 提交问题
        function submitQuestion() {
            const question = document.getElementById('user-question').value.trim();
            if (!question) {
                alert('请输入问题');
                return;
            }
            
            if (remainingQuestions <= 0) {
                alert('提问次数已用完，请尝试揭示真相或重新开始游戏');
                return;
            }
            
            // 模拟AI回答
            const response = getAIResponse(question);
            
            // 更新游戏状态
            remainingQuestions--;
            document.getElementById('game-status').textContent = `剩余提问次数: ${remainingQuestions}`;
            
            // 显示AI回答
            document.getElementById('game-response').style.display = 'block';
            document.getElementById('game-response').textContent = `回答: ${response}`;
            
            // 添加到历史记录
            addToHistory(question, response);
            
            // 清空输入框
            document.getElementById('user-question').value = '';
            
            // 如果提问次数用完，强制揭示真相
            if (remainingQuestions <= 0) {
                setTimeout(() => {
                    alert('提问次数已用完，即将揭示真相');
                    revealTruth();
                }, 500);
            }
        }

        // 模拟AI回答逻辑
        function getAIResponse(question) {
            // 简单模拟，实际应用中可以使用更复杂的逻辑
            const questionLower = question.toLowerCase();
            const clues = currentSoup.clues.map(c => c.toLowerCase());
            
            // 检查问题是否包含关键线索
            const hasClue = clues.some(clue => questionLower.includes(clue));
            if (hasClue) {
                return "是（这个问题很关键）";
            }
            
            // 随机生成回答（实际应用中应该根据汤底逻辑判断）
            const random = Math.random();
            if (random < 0.4) return "是";
            if (random < 0.8) return "不是";
            if (random < 0.95) return "与此无关";
            return "是也不是";
        }

        // 添加到提问历史
        function addToHistory(question, response) {
            gameHistory.push({question, response});
            
            const historyList = document.getElementById('history-list');
            const historyItem = document.createElement('div');
            historyItem.className = 'history-item';
            historyItem.innerHTML = `
                <div class="user-question">提问: ${question}</div>
                <div class="ai-response">回答: ${response}</div>
            `;
            historyList.appendChild(historyItem);
        }

        // 揭示真相
        function revealTruth() {
            document.getElementById('soup-bottom').style.display = 'block';
            document.getElementById('soup-bottom').textContent = '真相: ${currentSoup.bottom}';
            
            document.getElementById('user-input').style.display = 'none';
            document.getElementById('reveal-btn').style.display = 'none';
            document.getElementById('restart-btn').style.display = 'block';
        }

        // 重新开始游戏
        function restartGame() {
            document.getElementById('soup-surface').style.display = 'none';
            document.getElementById('user-input').style.display = 'none';
            document.getElementById('game-response').style.display = 'none';
            document.getElementById('soup-bottom').style.display = 'none';
            document.getElementById('restart-btn').style.display = 'none';
            
            document.getElementById('game-status').textContent = '请选择题目类型开始游戏';
        }

        // 回车键提交问题
        document.getElementById('user-question').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                submitQuestion();
            }
        });
    </script>
</body>
</html>
